<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	th:with="bgConfig=${@configTag.getConfigValueMap('butgo')},article=${@articleTag.selectWebArticleHtmlById(articleId,'butgo')}">

<head>
	<th:block th:include="butgo/bg_include :: bg_head(title=${article.articleTitle},
    keywords=${article.keywords},
    description=${article.description},
    bgConfig=${bgConfig})" />
	<link th:href="@{/static/butgo/css/comment.css}" rel="stylesheet"  />
	<link rel="stylesheet" th:href="@{/static/butgo/libs/highlight/kimbie-dark.min.css}" />
	<link href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" >
	<script id="config-diff"
	th:inline="javascript">var GLOBAL_CONFIG_SITE = { title: [[${ article.articleTitle }]], isPost: !0, isHome: !1, isHighlightShrink: !1, isToc: !0, postUpdate: [[${ #dates.format(article.createTime, 'yyyy-MM-dd HH:mm') }]] }</script>
	<style>
		#aside-content #card-toc .toc-content>ul {
			padding: 0 !important;
		}

		body>#standalone-container {
			margin: 50px auto;
			max-width: 720px;
		}

		#editor-container {
			height: 350px;
		}
	</style>
</head>

<body>
	<th:block th:include="butgo/bg_include ::bg_side_bar" />
	<th:block th:include="butgo/bg_include :: bg_article(article=${article})" />
	<th:block th:include="butgo/bg_include :: bg_article_right_tool" />
	<th:block th:include="butgo/bg_include :: bg_local_search" />
	<th:block th:include="butgo/bg_include :: bg_article_toc" />
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
	<th:block th:include="butgo/bg_include :: bg_plugs_katex_css" />
	<!-- // <script type="module">
	// 	//流程图渲染
	// 	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
	// 	mermaid.initialize({ startOnLoad: true });
	// </script> -->

    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>
	<style>
		.md-editor-mermaid {
			line-height: normal;
		}
	</style>
	<script>
		// 树结构



		// const editType=1;
		//文章节点
		// var tocDom = document.getElementById("article-container");

		// var upDom = document.getElementById("toc-content");
		// var tocLeave = 2;
		// function removeNull(dDom) {
		// 	for (var i = 0; i < dDom.length; i++) {
		// 		var da = dDom[i].children;
		// 		if (da.length == 0 || da[0].innerText.length == 0) {
		// 			dDom[i].parentNode.removeChild(dDom[i]);
		// 		} else if (da.length > 1) {
		// 			removeNull(da[1].children);
		// 		}
		// 	}
		// }
		// function detalDom(dDom, leave, ppI) {
		// 	for (var i = 0; i < dDom.length; i++) {
		// 		dDom[i].classList.add("toc-item");
		// 		dDom[i].classList.add("toc-level-" + leave);
		// 		var da = dDom[i].children;
		// 		da[0].classList.remove("toc-link");
		// 		da[0].classList.add("toc-link");
		// 		var numDom = document.createElement("span");
		// 		numDom.className = "toc-number";
		// 		numDom.innerText = ppI + (i + 1) + ".";
		// 		var textDom = document.createElement("span");
		// 		textDom.className = "toc-text";
		// 		textDom.innerText = da[0].innerText;
		// 		da[0].replaceChild(numDom, da[0].childNodes[0]);
		// 		da[0].appendChild(textDom);
		// 		if (da.length > 1) {
		// 			da[1].classList.add("toc-child");
		// 			detalDom(da[1].children, leave + 1, ppI + (i + 1) + ".");
		// 		}
		// 	}
		// }
		// if (tocDom) {
		// 	var oneUl = tocDom.children;
		// 	if (oneUl.length == 1) {
		// 		oneUl[0].classList.add("toc");
		// 		removeNull(oneUl[0].children);
		// 		detalDom(oneUl[0].children, tocLeave, "");
		// 		upDom.appendChild(tocDom.children[0]);
		// 	}
		// 	else {
		// 		oneUl[0].parentNode.removeChild(oneUl[0]);
		// 		oneUl[0].classList.add("toc");
		// 		removeNull(oneUl[0].children);
		// 		detalDom(oneUl[0].children, tocLeave, "");
		// 		upDom.appendChild(tocDom.children[0]);
		// 	}
		// }
		// else {
		// 	GLOBAL_CONFIG_SITE.isToc = 0;
		// 	document.getElementById("mobile-toc-button").parentNode.removeChild(document.getElementById("mobile-toc-button"));
		// 	document.getElementById("card-toc").style.display = "none";
		// }

		//统计中英文字数
		var counter = function (content) {
			const cn = (content.match(/[\u4E00-\u9FA5]/g) || []).length;
			const en = (content.replace(/[\u4E00-\u9FA5]/g, '').match(/[a-zA-Z0-9_\u0392-\u03c9\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|[\u00E4\u00C4\u00E5\u00C5\u00F6\u00D6]+|\w+/g) || []).length;
			return [cn, en];
		};

		// 返回字数
		var wordCount = function (len) {
			var count = len[0] + len[1];
			if (count < 1000) {
				return count;
			}
			return Math.round(count / 100) / 10 + 'k';
		}

		// 返回阅读时长
		var readMin = function (len, { cn = 300, en = 160 } = {}) {
			var readingTime = len[0] / cn + len[1] / en;
			return readingTime < 1 ? '1' : parseInt(readingTime, 10);
		}

		var num = counter(document.getElementById("article-container").textContent);
		document.getElementById("wordCount").innerHTML = wordCount(num);
		document.getElementById("readCount").innerHTML = readMin(num) + "分钟";
	</script>



	<th:block th:include="butgo/bg_include :: bg_js(bgConfig=${bgConfig})" />
	<script th:src="@{/static/butgo/js/template-web.js}"></script>
	<script th:src="@{/static/default/js/tocTree.js}"></script>
	<script th:inline="JavaScript">
		//点赞，踩，分享，收藏，评分
		const generalRecordPrefix = ctx + "/general/record",
			handRecordPrefix = ctx + "/hand/record",
			commentHandPrefix = ctx + "/hand/comment",
			commentApiPrefix = ctx + "/api/comment",
			userUrl = ctx + "web/hand/user",
			articleId = [[${ article.articleId }]],
			userId = document.getElementById("userId").value,
			userName = document.getElementById("userName").value,
			articleCreateBy = [[${ article.createBy }]];
		template.defaults.imports.articleCreateBy = articleCreateBy;
		var pageData = {
			pageNum: 1,
			pageSize: 10,
			typeId: articleId
		};
		var quill;
		if (userId != '') {
			quill = new Quill('#editor-container', {
				modules: {
					syntax: true,
					toolbar: '#toolbar-container'
				},
				placeholder: 'Compose an epic...',
				theme: 'snow'
			});
			document.getElementById('sb-btn').innerHTML = "发送";
			document.getElementById('standalone-container').style.display = 'block';
		}
		function loginHand() {
			Qmsg.info('你可能还没有登录,请登录后进行操作!');
			setTimeout(function () {
				tzAlertLogin();
			}, 3000);
		}
		var dataObj = {
			'type': 'ARTICLE',
			'parentId': 0,
			'typeId': articleId,
			'replyBy': '',
			'fromBy': userName,
			'content': ''
		};

		function submit() {
			if (userId == '') {
				loginHand();
			}
			else {
				dataObj.content = quill.root.innerHTML;
				ajax({
					type: "POST",
					url: commentHandPrefix + "/addComment",
					dataType: "json",
					data: dataObj,
					beforeSend: function () {

					},
					success: function (msg) {
						if (msg.code == 200) {
							quill.setText('');
							Qmsg.info("评论成功,请稍后查看");
						}
						else {
							Qmsg.info(msg.msg);
						}

					},
					error: function () {

					}
				})
			}
		}

		document.getElementById("post-like").addEventListener('click', function () {
			if (userId == '') {
				loginHand();
			} else {
				ajax({
					type: "POST",
					url: handRecordPrefix + "/addLikeRecord",
					dataType: "json",
					data: { articleId: articleId },
					beforeSend: function () {

					},
					success: function (msg) {
						Qmsg.info(msg.msg);
					},
					error: function () {

					}
				})
			}
		});

		function addComment(commentId, replyBy) {
			if (userId == '') {
				loginHand();
			} else {
				dataObj.parentId = commentId;
				dataObj.replyBy = replyBy;
			}
		}

		function addCommentLike(commentId) {
			if (userId == '') {
				loginHand();
			} else {
				ajax({
					type: "POST",
					url: commentHandPrefix + "/addCommentLike",
					dataType: "json",
					data: { commentId: commentId },
					beforeSend: function () {

					},
					success: function (msg) {
						var data = msg.data;
						if (msg.code == 200) {
							var dd = document.getElementById("comment_" + commentId);
							if (data.visible == 0) {
								dd.classList.add('tk-liked');
								dd.lastChild.innerHTML = parseInt(dd.lastChild.innerHTML) + 1;
							}
							else {
								dd.classList.remove('tk-liked');
								dd.lastChild.innerHTML = parseInt(dd.lastChild.innerHTML) - 1;
							}
						}
						Qmsg.info(msg.msg);
					},
					error: function () {

					}
				})
			}
		}

		document.getElementById("post-nasty").addEventListener('click', function () {
			if (userId == '') {
				loginHand();
			} else {
				ajax({
					type: "POST",
					url: handRecordPrefix + "/addNastyRecord",
					dataType: "json",
					data: { articleId: articleId },
					beforeSend: function () {

					},
					success: function (msg) {
						Qmsg.info(msg.msg);
					},
					error: function () {

					}
				})
			}
		});

		getOnePage = function getOnePage(typeId, pageNum, pageSize) {
			ajax({
				type: "GET",
				url: commentApiPrefix + "/parentPage?pageNum=" + pageNum + "&pageSize=" + pageSize + "&typeId=" + typeId,
				dataType: "json",
				data: {},
				beforeSend: function () {
					document.getElementById('comment-loading').style.display = 'block';
				},
				success: function (msg) {
					document.getElementById('comment-loading').style.display = 'none';
					var data = msg.data;
					var boxDom = document.getElementById('comment-box');
					var html = template('comment-item-one', data);
					//相当于追加
					boxDom.innerHTML = boxDom.innerHTML + html;
					if (data.pages != data.pageNum && data.total != 0) {
						document.getElementById('comment-more').style.display = 'block';
					}
					else {
						document.getElementById('comment-more').remove();
					}
				},
				error: function () {

				}
			})
		};

		getOnePage(pageData.typeId, pageData.pageNum, pageData.pageSize);

		function readMore() {
			pageData.pageNum += 1;
			getOnePage(pageData.typeId, pageData.pageNum, pageData.pageSize);
		};

		getTwoPage = function getTwoPage(parentId, pageNum, pageSize, e) {

		}

		function addLookRecord(){

			ajax({
				type: "POST",
				url: generalRecordPrefix+"/addLookRecord",
				data: {
					articleId: articleId
				},
				dataType: "json",
				success: function (data) {
		
				},
				error: function () {

				}
			})
		}

		addLookRecord();

		function commentExpand(e) {
			if (e.classList.contains('_collapse')) {
				e.innerHTML = "展开";
				e.classList.remove("_collapse");
				e.previousElementSibling.classList.remove("tk-replies-expand");
			}
			else {
				e.innerHTML = "收起";
				e.classList.add("_collapse");
				e.previousElementSibling.classList.add("tk-replies-expand");
			}
		}

		function checkHand() {
			if (userId != "") {
				ajax({
					type: "GET",
					url: commentHandPrefix + "/listCommentHandByTypeId/" + articleId,
					dataType: "json",
					beforeSend: function () {

					},
					success: function (msg) {
						var data = msg.data;
						if (data != null) {
							for (let index = 0; index < data.length; index++) {
								var dd = document.getElementById("comment_" + data[index].commentId);
								if (dd) {
									dd.classList.add('tk-liked');
								}
							}
						}
					},
					error: function () {

					}
				})

			}

		}
		checkHand();
	</script>

	<script>

		const tocData =new buildToc('article-container','h1, h2, h3, h4, h5, h6','love-').getTree();

		if(!tocData || tocData.length==0){
			GLOBAL_CONFIG_SITE.isToc = 0;
			document.getElementById("mobile-toc-button").parentNode.removeChild(document.getElementById("mobile-toc-button"));
			document.getElementById("card-toc").style.display = "none";
		}
		else{
	        document.getElementById("toc-content").innerHTML=template('toc_template', { data: tocData });

		}

		setTimeout(function () {
			
		}, 1000);

	</script>




</body>


</html>